<template>
  <div id="test">
    <h1>这是Test页面</h1>
    <input type="text"
           v-model="msg">
    {{msg}}
    <div>{{user}}</div>
    <textarea cols="30"
              rows="10">{{content}}</textarea>
  </div>
</template>
<script>
// this指向vue的实例，
// 在脚手架中this.$el指向模板的根标签（用于获取Vue实例挂载的Dom元素），而且是在mounted生命周期里有效
export default {
  name: 'Test',
  data() {
    return {
      msg: '测试',
      user: '',
      content: '',
    }
  },

  // 在创建vue这个对象之前 就是实例new Vue这一步骤，这里看不到是因为省略了
  // 在创建前什么对象都拿不到
  beforeCreate() {
    // $后面接着要读取的方法 此处表示需要读取外部data()里面的方法
    // 返回的是创建前undefined,说明读取不到$data里面的值
    // console.log('创建前'+this.$data.msg);//创建前undefined
    // $el表示节点元素 在这里也是为空
    // console.log(this.$el);//null
  },

  // !!!!用的比较多 预加载时的方法 相当于懒加载的效果
  // 懒加载:如果把数据放created里面,加载完成后,页面会将数据一起显示出来
  // 组件实例创建之后 但是DOM还没生成 不会显示页面 但是可以获取到data里面的数据
  created() {
    // console.log(this.$el);//null
    // console.log(this.$data.msg);//测试
  },

  // 创建完成和挂载前中间的时候
  beforeMount() {
    // console.log(this.$el);//null
    // console.log(this.$data.msg);//测试
  },
  // !!!用的比较多 挂载后
  // 生命周期挂在之后只会走一遍 DOM已生成，即获取获取多少数据就输出多少，
  //   如果网速慢或其他因素加载慢，会一点一点的显示网页，
  // 如果想要一起显示就写在上面created()方法里面
  mounted() {
    console.log(this.$el) //获取节点 即template模板里面的内容
  },

  //   更新前 根据变化过后，将最新的数据重新渲染給组件的模板结构 注意是重新渲染数据
  beforeUpdate() {
    //   实例化上面msg的值
    console.log('更新前')
    var msg = this.msg
    //   将msg的值赋值給user
    // 此时上面user属性的值会根据msg属性值的改变而改变
    this.user = msg
  },

  // 更新后 和更新前beforeUpdate()的区别是 不会重新渲染数据，是根据最新的数据来将DOM重新渲染，节省了很多性能
  updated() {
    console.log('更新后')
    this.content = this.user
  },

  //   销毁前 关闭页面前的状态 从a页面到b页面前进行的操作 或者页面关闭，凡是会销毁数据的都可以用到该方法
  beforeDestroy() {
    console.log('销毁前的状态')
  },
  //   销毁后 关闭页面后的状态
  destroyed() {},
}
</script>
<style scoped>
</style>